Vue.component('modal', {
    template: '<div class="modal-mask scroll-modal" v-show="show" transition="modal">' +
        '<div class="modal-wrapper">' +
        '<div class="modal-container" :style="style">' +
        '<div class="modal-header">' +
        '<slot name="header">标题</slot>' +
        '<em class="close" @click="close()"><i></i></em>' +
        '</div>' +
        '<div class="modal-body">' +
        '<slot name="body">内容</slot>' +
        '</div>' +
        '<div class="modal-footer">' +
        '<slot name="footer">' +
        '<button class="btn" @click="close()">确定</button>' +
        '</slot>' +
        '</div>' +
        '</div>' +
        '</div>' +
        '</div>',
    props: {
        show: {
            type: Boolean,
            required: true,
            twoWay: true
        },
        addClass: {
            type: String,
            required: false,
            default: ''
        },
        style: Object,
        init: Function,
        beforeClose: Function
    },
    ready: function() {
        if (typeof this.init === 'function') {
            this.init();
        }
    },
    watch: {
        show(isShow) {
            if (isShow) {
                document.querySelector('body').style.overflowY = 'hidden';
            } else {
                document.querySelector('body').style.overflowY = 'auto';
            }
        }
    },
    methods: {
        close: function() {
            if (typeof this.beforeClose === 'function') {
                if (this.beforeClose() === false) {
                    return;
                }
            }
            this.show = false;
        }
    }
});